@charset "UTF-8";
/**
 * _button.scss
 * @author Tomi
 * @date 2017-07-19
 *
 * .tm_btn
 *  + .tm_btn_Ghost
 *
 */

/* button mixin */
@mixin btnColor($backgroundColor:$common_color_primary, $borderColor:$backgroundColor,$fontColor:$common_color_white){
    background-color:$backgroundColor;
    border-color: $borderColor;
    color: $fontColor;
}
@mixin btnHoverColor($backgroundColor:$common_color_primary, $borderColor:$backgroundColor,$fontColor:$common_color_white){
    &:hover {
        background-color: lighten($backgroundColor, 5%);
        border-color: lighten($borderColor, 5%);
        color: $fontColor;
    }
    &:active, &.active, &:hover {
        color: $fontColor;
    }
    &:active, &.active {
        background-color: darken($backgroundColor, 5%);
        border-color: darken($borderColor, 5%);
    }
    &.#{$ns}btn-ghost,
    &.#{$ns}btn-dashed {
        background: $common_color_white;
        color: $backgroundColor;
        &:hover {
            border-color: lighten($borderColor, 10%);
            color: lighten($backgroundColor, 10%);
        }
        &:active, &.active {
            border-color: darken($borderColor, 10%);
            color: darken($backgroundColor, 10%);
        }
    }
}

/* button */
.#{$ns}btn {
    $nsBtn: &;
    display: inline-block;
    padding: $btn_padding;
    margin-bottom: 0;
    vertical-align: middle;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    background-image: none;
    border: $btn_border;
    border-radius: $btn_radius;
    background-color: $btn_background;
    border-color: $common_color_border;
    white-space: nowrap;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    color: $btn_color;
    line-height: $btn_lineHeight;
    font-size: $btn_fontSize;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    transition:color .2s linear,background-color .2s linear,border .2s linear;
    &:hover {
        @include btnColor($common_color_white, $common_color_lightPrimary, $common_color_lightPrimary);
        text-decoration: none;
    }
    &:active,&:focus {
        outline: none;
    }
    &:active, &.active {
        @include btnColor($common_color_white, $common_color_darkPrimary, $common_color_darkPrimary);
    }

    // 加长按钮
    &-long {
        width: 100%;
    }

    // 实线按钮
    &-ghost {
        @include btnColor(transparent, $common_color_border, $common_color_content);
    }
    // 虚线按钮
    &-dashed {
        @include btnColor(transparent, $common_color_border, $common_color_content);
        border-style: dashed;
    }
    // 文本按钮
    &-text {
        @include btnColor(transparent, transparent, $common_color_content);
    }
    // 圆形按钮
    &-circle {
        border-radius: 32px;
    }

    // 禁止按钮
    &[disabled], &.disabled {
        &, &:hover, &:active, &.active {
            @include btnColor($btn_background, $common_color_border, $common_color_disabled);
        }
        cursor: not-allowed;
    }
}

// Modifiers
// ====================================================================
.#{$ns}btn {
    // 主要按钮
    &-primary {
        $color:$common_color_primary;
        @include btnColor($color);
        @include btnHoverColor($color);
    }
    // 信息按钮
    &-info {
        $color:$common_color_info;
        @include btnColor($color);
        @include btnHoverColor($color);
    }

    // 成功按钮
    &-success {
        $color:darken($common_color_success,2%);
        @include btnColor($color);
        @include btnHoverColor($color);
    }

    // 警告按钮
    &-warning {
        $color: $common_color_warning;
        @include btnColor($color);
        @include btnHoverColor($color);
    }

    // 错误按钮
    &-error {
        $color: $common_color_error;
        @include btnColor($color);
        @include btnHoverColor($color);
    }

    // 危险按钮
    &-danger {
        $color: $common_color_danger;
        @include btnColor($color);
        @include btnHoverColor($color);
    }
}

// Size
// ====================================================================
.#{$ns}btn {
    $nsBtn: &;
    &-large {
        padding: (nth($btn_padding , 1) + 2) nth($btn_padding, 2) (nth($btn_padding , 1) + 3);
        font-size: $btn_fontSize + 2;
        &#{$nsBtn}-circle {
            border-radius: (($btn_fontSize + 2) * 1.5) + (nth($btn_padding , 1) + 2) + (nth($btn_padding , 1) + 3) + 2;
        }
    }
    &-small {
        padding: (nth($btn_padding , 1) - 2) (nth($btn_padding, 2) - 5);
        border-radius: $btn_radius - 1;
        &#{$nsBtn}-circle {
            border-radius: (($btn_fontSize) * 1.5) + (nth($btn_padding , 1) - 2) * 2 + 2;
        }
    }
    &-mini {
        padding: (nth($btn_padding , 1) - 4) (nth($btn_padding, 2) - 8) (nth($btn_padding , 1) - 5);
        border-radius: $btn_radius - 1;
        &#{$nsBtn}-circle {
            border-radius: (($btn_fontSize) * 1.5) + (nth($btn_padding , 1) - 4) + (nth($btn_padding , 1) - 5) + 2;
        }
    }
}

// extend
// ====================================================================
.#{$ns}btn {
    & > .#{$ns}icon {
        font-size: 1;
        & + span {
            margin-left: 4px;
        }
    }
    &:before {
        content: '';
        position: absolute;
        top: -1px; right: -1px; bottom: -1px; left: -1px;
        background-color: $common_color_white;
        border-radius: inherit;
        opacity: .35;
        pointer-events: none;
        display: none;
        transition: opacity .2s;
    }
    &-loading {
        position:relative;
        pointer-events: none;
        &:before {
            display: block;
        }
    }
}